<!--
 * @Author: chunlai
 * @Date: 2025-07-01 16:01:38
 * @LastEditTime: 2025-08-11 11:08:56
 * @LastEditors: minsheng_insurance_agency_zhoucl
 * @FilePath: \02.bldinsure\src\views\index\feecount\HealthyNotice.vue
 * @Description: 短险健康问卷
-->
<template>
  <div class="pop-mask healthy-pop" v-if="pageLoad">
    <div class="pop-container">
      <div class="pop-container-title">{{ title }}</div>
      <div class="pop-container-conts">
        <div class="pop-container-desc" v-html="desc"></div>
        <div class="pop-container-items">
          <div
            class="base-item"
            v-for="(item, idx) in pageData"
            :key="idx"
            :idx="idx"
          >
            <div v-html="item.text"></div>
          </div>
        </div>
      </div>
      <div class="pop-container-btns">
        <span class="btn cancel" @click="clickHandle('0')">部分为是</span>
        <span class="btn sure" @click="clickHandle('1')">以上全否</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HealthyNotice",
  components: {},
  data() {
    return {
      title: "被保险人",
      desc: "本健康问卷必须由投保人亲自填写，如您非投保人本人，或您是投保人本人，但不完全知晓所有被保险人的健康/职业状况,请立即停止填写本问卷。<br>投保人应在对所有被保险人健康和职业状况充分了解的基础上履行如实告知义务。根据《中华人民共和国保险法》规定，您在投保时应如实告知被保险人相关信息，如有隐瞒或不实告知，我公司有权依据法律规定及本保险条款约定：<br>（1）本公司有权不同意承保。<br>（2）若发生保险事故，本公司不承担赔偿或给付保险金的责任，并有权不退还保险费。<br>投保人需确认被保险人是否有以下情况？",
      pageData: [],
      pageLoad: false,
    };
  },
  computed: {},
  watch: {},
  created() {
    this.pageLoad = false;
    /**防止页面滑动 */
    let that = this;
    document.body.addEventListener("touchmove", that.cancelEvent, {
      passive: false,
    });
    document.body.classList.add("van-overflow-hidden");
  },
  beforeDestroy() {
    let that = this;
    document.body.removeEventListener("touchmove", that.cancelEvent, {
      passive: false,
    });
    document.body.classList.remove("van-overflow-hidden");
  },
  mounted() {},
  methods: {
    cancelEvent(e) {
      e.preventDefault();
    },
    initModal(infos, userInfo = {}) {
      this.title = infos;
      this.$store.dispatch("json/getHealthyJson").then((res) => {
        if (this.compEngName === "taikang") {
          // 判断是否未成年
          const bbAge = this.$GlobalFuns.userAge(userInfo.birthDate);
          this.pageData = bbAge < 18 ? res.Datas.children : res.Datas.adults;
        } else {
          this.pageData = res.Datas;
        }
        this.pageLoad = true;
      });
    },
    clickHandle(value) {
      this.$emit("sureClick", value);
      this.pageLoad = false;
    },
  },
};
</script>
<style lang="less" scoped>
.pop-mask {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  width: 100vw;
  height: 100vh;
  z-index: 299;
  .pop-container {
    width: 100%;
    height: 95vh;
    border-radius: 10px 10px 0 0;
    background: #e9e9eb;
    overflow: hidden;
    &-title {
      width: 100%;
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      text-align: center;
      font-weight: 600;
      font-family: MiSans;
      background: #ffffff;
    }
    &-conts {
      width: 100%;
      height: calc(100% - 100px);
      overflow: hidden;
      overflow-y: scroll;
    }
    &-desc {
      width: 100%;
      font-weight: 400;
      line-height: 1.3;
      font-size: 12px;
      color: #646464;
      padding: 10px 6px;
      background: #fffbc9;
      margin-top: 1px;
    }
    &-items {
      padding: 10px 12px;
      margin-top: 10px;
      background: #ffffff;
    }
    &-btns {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      padding: 0 12px;
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      .btn {
        width: 46%;
        height: 40px;
        line-height: 38px;
        font-size: 18px;
        font-family: MiSans;
        color: #da251e;
        border-radius: 40px;
        border: 1px solid #ebeef5;
        text-align: center;
        &.sure {
          color: #ffffff;
          border: 1px solid #da251e;
          background: #da251e;
        }
      }
    }
  }
}

.base-item {
  border-radius: 4px;
  padding: 10px;
  box-shadow: 2px 0 2px #e6e6e6, -2px 0 2px #e6e6e6, 0 2px 2px #e6e6e6,
    0 -2px 2px #e6e6e6;
  background: #ffffff;
  margin-bottom: 10px;
}
</style>
